import { useEffect } from 'react'
function LifeCycleFC() {
    // useEffect的用法，接收两个参数，第一个参数是回调函数，第二个参数是依赖数组 
    // 1. 当数组为空数组的时候，回调函数只会在组件挂载的时候执行一次 useEffect(() => { }, [])
    // 2. 当数组不为空的时候，回调函数会在组件挂载以及依赖数据变化的时候执行 useEffect(() => { }, [num])
    // 3. 当没有依赖数组的时候，第二个参数不写的时候，回调函数会在组件挂载及组件重新渲染的时候执行  useEffect(() => { })
    useEffect(() => {
        const box = document.getElementById('container')
        console.log(box)
        box.style.width = 100 + 'px'
        box.style.height = 100 + 'px'
        box.style.backgroundColor = 'blue'
        return () => {
            // 在这里执行清理代码 
            // componentWillUnmount
        }
    }, [])
    return <div id="container"></div>
}

export default LifeCycleFC;